﻿<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
  <title>练练口算</title>
  <script src="js\vue.min.js"></script>
  <script src="js\pre.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div id="app">
    <div class="top">
      <div>{{_timer}}</div>
      <div style="flex:1"></div>
      <div>{{_status}}</div>
    </div>
    <div class="equation">{{_equation}}</div>
    <div class="finished">
      <div class="list" v-for="(row,inx) in finished" :key="inx">
        {{inx+1}}.{{row[0]}}{{row[3]}}{{row[1]}}={{row[2]}} {{row[4]==1?'答对了':'答错了'}}
      </div>
    </div>
    <div class="tips">{{tips}}</div>
    <div class='xx-row' v-for="(row,rowInx) in keyMap" :key="rowInx">
      <div class='xx-col' @click="keyup(item)" v-for="item in row" :key="item">
        {{keyList[item].label}}
      </div>
    </div>
    <div style="height:20px"></div>
    <div class="mask" v-if="showMask">
      <div class="pop" @click="start">
        <div class="welcome">{{welcomeTips}}</div>
        <div id="start">{{buttonText}}</div>
      </div>
    </div>
  </div>
</body>
<script>
  var ddd = new Vue(
    {
      el: "#app",
      data() {
        return {
          tips: "",
          times: 120,
          welcomeTips: '欢迎回来练练口算',
          buttonText: "开始计算",
          showMask: true,
          title: "练练口算",
          keyList: keyList,
          keyMap: keyMap,
          equation: [0, 0, 0, "+"],
          result: "",
          finished: []
        }
      },
      computed: {
        _equation() {
          let t = this.equation
          return `${t[0]}${t[3]}${t[1]}=${this.result}`
        },
        _timer() {
          return `还有${this.times}秒`
        },
        _status() {
          if (this.finished.length == 0) return ''
          return `已经完成${this.finished.length}道`
        },
        _yes() {
          let yesLis = this.finished.filter((item) => item[4] == 1)
          return `答对：${yesLis.length} 答错${this.finished.length - yesLis.length}`
        }
      },
      mounted() {
        // document.querySelectorAll('*').forEach((elm) => { elm.style.outline = '1px solid red' })
      },
      methods: {
        // 开始计算
        start() {
          this.showMask = false
          this.init()
        },

        updateTime() {
          if (this.times == 0) {
            this.welcomeTips = "时间到，共" + this._yes
            this.buttonText = "重新开始"
            this.showMask = true
            this.$forceUpdate()
            return
          }
          this.times -= 1
          setTimeout(() => {
            this.updateTime()
          }, 1000)
        },

        init() {
          this.equation = [...genEquation()]
          this.finished = []
          this.result = ""
          this.times = 120
          this.updateTime()
        },

        keyup(v) {
          const { type, val } = this.keyList[v]
          // console.log(type, val)
          if (type == "num") {
            this.result += val
            return
          }
          switch (val) {
            case "submit":
              if (this.result == '') {
                this.tips = "请输入一个答案"
                return
              }
              const inx = this.finished.push([...this.equation]) - 1
              this.finished[inx][2] = parseInt(this.result)
              this.finished[inx].push(parseInt(this.result) == this.equation[2] ? 1 : 0)
              console.log(this.finished)
              this.equation = [...genEquation()]
              this.result = ""
              break
            case "back":
              this.result = this.result.substring(0, this.result.length - 1)
              break
            case "clear":
              this.result = ""
              break
            case "diff":
              console.log(genEquation())
              break
          }
        }
      }
    }
  );
</script>

</html>